<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>弹窗</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Microsoft YaHei';
            background-color: lightskyblue;
            height: 1000px;
        }
        
        section {
            width: 100%;
            height: 1000px;
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            display: none;
        }
        
        #box {
            width: 350px;
            height: 200px;
            border: 1px solid #aaa;
            box-shadow: 0 0 5px #666;
            background-color: #fff;
            text-align: center;
            position: absolute;
        }
        
        #box h2 {
            width: 100%;
            margin: 0;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            background-color: #ccc;
            font-weight: normal;
            position: relative;
            cursor: move;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
        
        #box h2 strong {
            width: 40px;
            position: absolute;
            right: 0;
            cursor: pointer;
        }
        
        #box lable {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
        
        #box lable:first-of-type {
            margin-top: 20px;
        }
        
        #box input[type=button] {
            margin-top: 20px;
            width: 200px;
            height: 30px;
        }
        
        button[type=button] {
            width: 60px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <section>
        <div id="box">
            <h2>用户登录<strong>×</strong></h2>
            <lable>账号：<input type="text" placehoder="" 请输入用户名></lable>
            <lable>密码：<input type="password" placehoder="" 请输入密码></lable>
            <input type="button" value="登录">
        </div>
    </section>
    <button type="button">点我</button>
    <main><a href="02-弹出框.html" target="_blank">标准示范版</a></main>
</body>

</html>

<script>
    // 显示遮罩层
    $('button[type=button]').click(function () {
        $('section').css('display', 'block');
        location();
    })
    // 关闭遮罩层
    $('#box h2 strong').click(function () {
        $('section').css('display', 'none');
    })

    // 给遮罩层内的#box定位
    function location() {
        var JLleft = ($(window).width() - $('#box').width()) / 2 + $(document).scrollLeft();
        var JLtop = ($(window).height() - $('#box').height()) / 2 + $(document).scrollTop();
        $('#box').css({
            top: JLtop,
            left: JLleft
        })
    }

    // 页面滚动事件
    $(document).stop().scroll(function () {
        location();
    })
    // 浏览器大小改变事件
    $(window).resize(function () {
        location();
    })



    // 让弹窗移动
    $('#box h2').mousedown(function (ev) {
        // 当按下鼠标时，获取当前点击的位置，距离元素左上角的偏移量
        var distanceX = ev.offsetX;
        var distanceY = ev.offsetY;
        $(document).mousemove(function (ev) {
            // console.dir(ev.pageX);
            // 不管点击h2的哪个位置，始终获取h2上鼠标点击的偏移量
            var left = ev.pageX - distanceX;
            var top = ev.pageY - distanceY;

            // 左右不能越界
            if (left < 0) {
                left = 0;
            }
            if (left <= $(document).scrollLeft()) {
                left = $(document).scrollLeft();
            }
            if (left >= $(window).width() - $('#box').width() + $(document).scrollLeft()) {
                left = $(window).width() - $('box').width() + $(document).scrollLeft();
            }

            // 上下不能越界
            if (top < 0) {
                top = 0;
            }
            if (top <= $(document).scrollTop()) {
                top = $(document).scrollTop();
            }
            if (top >= $(window).height() - $('#box').height() + $(document).scrollTop()) {
                top = $(window).height() - $('#box').height() + $(document).scrollTop();
            }
            $('#box').css({ left: left, top: top });
        });
    });

    // 松开鼠标，取消移动
    $(document).mouseup(function () {
        $(this).off('mousemove');
    })

</script>